<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./progressStyle.css" />
    <title>Progress</title>
  </head>

  <body>
    <div class="progressСontainer">
      <div class="progress">
        <svg class="progressBar">
          <circle class="progressBar__cercleBack" cx="60" cy="60" r="52"></circle>
          <circle class="progressBar__cercle" cx="60" cy="60" r="52" id="circle"></circle>
        </svg>
      </div>

      <div class="control">
        <label for="progressValue">
          <input class="number__input" type="number" id="progressValue" value="0" />
          <span>Value</span>
        </label>

        <label for="animateToggle">
          <input class="checkbox_input animate" type="checkbox" id="animateToggle" />
          <span class="checkbox_inner">Animate</span>
        </label>

        <label for="hideToggle">
          <input class="checkbox_input hide" type="checkbox" id="hideToggle" />
          <span class="checkbox_inner">Hide</span>
        </label>
      </div>
    </div>

    <script src="./main.js" type="module"></script>
    
  </body>
</html>
